<template>
  <!-- 我的统计 -->
  <view class="Teamstatistics">
    <view class="MyStatisticsHome">
      <!-- 个人信息 -->
      <view class="detail-item">
        <view class="rank-box">
          <view class="user-info-left">
            <image v-if="user.img_url" class="user-photo" :src="user.img_url" mode=""></image>
            <view class="user-name-image" v-else>{{ user.worker_name }}</view>
          </view>
        </view>

        <view class="user-info">
          <text class="name">{{ user.worker_name }}</text>
          <view class="department">办公室 <span style="color: #3c9cff;" @click="showAlert">(查看规则)</span></view>
        </view>

        <view style="max-width: 140px;min-width: 100px;">
          <!-- 修改这里 -->
          <up-subsection :list="list" :current="current" @change="UpsubsectChange" inactive-color="#999"
            mode="button"></up-subsection>
        </view>
      </view>

      <view style="padding: 10px;">
        <Dailystatistics v-show="subsection == 0"></Dailystatistics>
        <Weeklystatistics v-show="subsection == 1"></Weeklystatistics>
        <Monthlystatistics v-show="subsection == 2"></Monthlystatistics>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/pinia-store/user';
import { mapStores } from 'pinia';
import Dailystatistics from '@/components/AttcemanntComponent/MyStatistics/Dailystatistics.vue'
import Monthlystatistics from '@/components/AttcemanntComponent/MyStatistics/Monthlystatistics.vue'
import Weeklystatistics from '@/components/AttcemanntComponent/MyStatistics/Weeklystatistics.vue'
export default {
  components: { Dailystatistics, Weeklystatistics, Monthlystatistics },
  data () {
    return {
      list: ['日', '周', '月'],
      current: 0,
      subsection: 0,
      user: {  // 个人信息
        img_url: '',
        worker_name: '',
      },
    }
  },
  computed: {
    ...mapStores(useUserStore)
  },
  created () {
    this.user = this.userStore.user ? this.userStore.user : {
      img_url: null,
      worker_name: '张三'
    };
    // console.log('我的统计')
    this.subsection = 0
  },
  methods: {
    showAlert () {
      uni.navigateTo({
        url: '/components/AttcemanntComponent/ViewRules/index',
        animationType: 'none'
      });
    },
    UpsubsectChange (e) {
      this.subsection = e
    },
  }
}
</script>

<style lang="scss" scoped>
:deep(.up-subsection) {
  width: 100%;
  height: 40px;
  background-color: #f5f5f5;
  border-radius: 20px;
}

.Teamstatistics {
  width: 100%;

  .MyStatisticsHome {
    height: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;

    .detail-item {
      height: 5vh;
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 10rpx;
      border-bottom: 1px solid #eee;

      .user-info {
        flex: 1;
        margin-left: 24rpx;
        display: flex;
        flex-direction: column;

        .name {
          font-size: 32rpx;
          font-weight: bold;
        }

        .department {
          font-size: 24rpx;
          color: #999;
        }
      }

      .time-box {
        text-align: right;
        margin-right: 20rpx;

        .time-label {
          display: block;
          font-size: 24rpx;
          color: #999;
        }

        .time {
          font-size: 36rpx;
          color: #07c160;
          font-weight: 500;
        }
      }
    }





  }
}


.user-info-left {
  display: flex;

  .user-photo {
    width: 86rpx;
    height: 86rpx;
    border-radius: 8rpx;
  }

  .user-name-image {
    width: 86rpx;
    height: 86rpx;
    line-height: 86rpx;
    text-align: center;
    color: #fff;
    border-radius: 8rpx;
    background-color: #0195FF;
  }

  .user-name {
    margin-top: 8rpx;
    margin-left: 28rpx;
    font-size: 28rpx;
    color: #555;
  }

  .user-viewrule {
    margin-left: 28rpx;
    font-size: 24rpx;
    color: #aaa;
    margin-top: 10rpx;

    text {
      margin-left: 8rpx;
      color: #0195FF;
    }
  }
}
</style>